import QtQuick 2.11
import QtQuick.Window 2.11


Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: thisLabel
        x: 24; y: 16
        height: width * 2
        property int times: 24
        property alias anotherTimers: thisLabel.times
        text: "Greetings" + times
        font.family: "Windows"
        font.pixelSize: 24

        //KeyNavigation is an attached property
        KeyNavigation.tab: otherLabel

        //signal handler for property changes
        onHeightChanged: console.log("height:", height)

        //focus is needed to receive key events
        focus: true

        //change color based on focus value
        color: focus? "red": "black"

        MouseArea {
            anchors.fill: parent
            onClicked: parent.focus = true
        }
    }

    Text {
        id: otherLabel
        x: 328; y: 88
        height: width * 2
        text: qsTr("text")
        font.family: "songti"
        font.pixelSize: 24


    }
    //4.1.2脚本
    Text {
        id: label
        x: 100; y: 200
        //custom counter property for space presses
        property int spacePresses: 0
        text: "Space pressed: " + spacePresses + " times"       //QML的属性绑定

        //handler for text changes
        onTextChanged: console.log("text changed to:", text)

        //need focus to receive key events
        focus: true

        //handler wits sone JS
        Keys.onSpacePressed: {
            increment()
        }

        //clear the text on escape
        Keys.onEscapePressed: {
            label.text = ""                                     //赋值(当一个新的绑定生效或者使用JS赋值给属性时，之前的绑定的生命周期就会结束)
                                                                //当按下ESC后,绑定（text: "Space pressed: " + spacePresses + " times"）被销毁
        }

        //a JS function
        function increment() {
            spacePresses += 1
            console.log("spacePresses")
        }

        MouseArea {
            anchors.fill: parent
            onClicked: parent.focus = true
        }
    }
    //4.2.2 矩形元素
    Rectangle {
        id: rect1
        x: 12; y: 12
        width: 76; height: 96
        color: "lightsteelblue"
    }

    Rectangle {
        id: rect2
        x: 112; y:12
        width: 76; height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }

    Rectangle {
        id: rect3
        x: 212; y: 12
        width: 76; height: 96
        gradient: Gradient {
            GradientStop { position: 0.0; color: "lightsteelblue" }
            GradientStop { position: 1.0; color: "slategray" }
        }
        border.color: "slategray"
    }

    //4.2.3 文本元素

    //4.2.4 图像元素
    Image {
        id: img1
        x: 12; y: 112
        source: "./images/triangle_red.png"
    }

    Image {
        id: img2
        x: 112; y: 112
        width: 48
        height: 48
        source: "./images/triangle_red@2x.png"
        fillMode: Image.PreserveAspectCrop
        clip: true
    }

    //4.3 组件
    Button {
        id: button1
        x: 212; y: 212
        text: "Start"
        onClicked: {
            status.text = "Button clicked!"
        }
    }

    Text {
        id: status
        x:212; y: 276
        width: 116; height: 26
        text: "waiting"
        horizontalAlignment: Text.AlignHCenter
    }
}


